<template>
  <div class="app-container">
    <el-tabs
      v-model="activeName"
      v-loading="listLoading"
      type="border-card"
      @tab-click="handleClick"
    >
      <!-- 集群状态监控       -->
      <el-tab-pane name="first">
        <span slot="label">
          <svg-icon
            icon-class="cluster-tab-status"
            class="tab-pane-label-class"
          ></svg-icon>
          集群状态监控
        </span>
        <div class="pane-class">
          <asim-split-pane
            :min-percent="splitMinPrecent"
            :default-percent="defaultPercent"
            split="vertical"
            style="border: 1px solid #e8e8e8"
          >
            <template slot="paneL">
              <el-container>
                <el-main>
                  <span v-if="!openSide">
                    <section-title
                      title=""
                      open-class="el-icon-caret-right"
                      @changePaneL="changePaneLWith"
                    />
                  </span>
                  <span v-else>
                    <section-title
                      title="集群列表"
                      open-class="el-icon-caret-left"
                      @changePaneL="changePaneLWith"
                    />
                    <node-list
                      :data-source="dataSource"
                      node-key="oid"
                      :default-props="defaultProps"
                      @change="clickNode"
                    ></node-list>
                  </span>
                </el-main>
              </el-container>
            </template>
            <template slot="paneR">
              <section-title :title="currentNode.name" />
              <el-container>
                <el-main>
                  <el-row type="flex">
                    <el-col :span="12">
                      <el-row>
                        <el-col :span="12">
                          <section-title
                            title=" CPU"
                            icon-class="el-icon-s-data"
                            border-bottom="false"
                          ></section-title>
                        </el-col>
                        <el-col :span="12" align="right">
                          <!--                            <el-tooltip class="item" effect="dark" content="下载图片" placement="top">-->
                          <!--                              <el-button  size="mini" icon="el-icon-download" circle @click="downloadImg('cpu')"></el-button>-->
                          <!--                            </el-tooltip>-->
                          <el-tooltip
                            class="item"
                            effect="dark"
                            content="详细数据"
                            placement="top"
                          >
                            <el-button
                              size="mini"
                              icon="el-icon-d-arrow-right"
                              circle
                              @click="goChartDetail('cpu', ' CPU')"
                            ></el-button>
                          </el-tooltip>
                        </el-col>
                      </el-row>
                      <!--图表组件-->
                      <div class="grid-content bg-purple-dark">
                        <!--                          <cpu-chart :executeMethod="childMethod.cpu" chartId="cpu"></cpu-chart>-->
                        <high-charts-cpu
                          title="cpu"
                          :charts-data="chartsData"
                        ></high-charts-cpu>
                      </div>
                    </el-col>

                    <el-col :span="12">
                      <el-row>
                        <el-col :span="12">
                          <section-title
                            title=" 磁盘IO"
                            icon-class="el-icon-s-data"
                            border-bottom="false"
                          ></section-title>
                        </el-col>
                        <el-col :span="12" align="right">
                          <el-tooltip
                            class="item"
                            effect="dark"
                            content="详细数据"
                            placement="top"
                          >
                            <el-button
                              size="mini"
                              icon="el-icon-d-arrow-right"
                              circle
                              @click="goChartDetail('disk', ' 磁盘IO')"
                            ></el-button>
                          </el-tooltip>
                        </el-col>
                      </el-row>
                      <!--图表组件-->
                      <div class="grid-content bg-purple-dark">
                        <high-charts-cpu title="disk"></high-charts-cpu>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-row>
                        <el-col :span="12">
                          <section-title
                            title=" 网络IO"
                            icon-class="el-icon-s-data"
                            border-bottom="false"
                          ></section-title>
                        </el-col>
                        <el-col :span="12" align="right">
                          <el-tooltip
                            class="item"
                            effect="dark"
                            content="详细数据"
                            placement="top"
                          >
                            <el-button
                              size="mini"
                              icon="el-icon-d-arrow-right"
                              circle
                              @click="goChartDetail('network', ' 网络IO')"
                            ></el-button>
                          </el-tooltip>
                        </el-col>
                      </el-row>
                      <!--图表组件-->
                      <div class="grid-content bg-purple-dark">
                        <high-charts-cpu title="network"></high-charts-cpu>
                      </div>
                    </el-col>

                    <el-col :span="12">
                      <el-row>
                        <el-col :span="12">
                          <section-title
                            title="柱状图"
                            icon-class="el-icon-s-data"
                            border-bottom="false"
                          ></section-title>
                        </el-col>
                        <el-col :span="12" align="right">
                          <el-tooltip
                            class="item"
                            effect="dark"
                            content="详细数据"
                            placement="top"
                          >
                            <el-button
                              size="mini"
                              icon="el-icon-d-arrow-right"
                              circle
                              @click="goChartDetail('histogram', '柱状图')"
                            ></el-button>
                          </el-tooltip>
                        </el-col>
                      </el-row>
                      <!--图表组件-->
                      <div class="grid-content bg-purple-dark">
                        <!--                            <histogram :executeMethod="childMethod.histogram" chartId="histogram"></histogram>-->
                        <hight-charts-histogram
                          :charts-data="chartsData"
                        ></hight-charts-histogram>
                      </div>
                    </el-col>
                  </el-row>
                  <div style="height: 100px"></div>
                </el-main>
              </el-container>
            </template>
          </asim-split-pane>
        </div>
      </el-tab-pane>

      <!-- 负载监控-->
      <el-tab-pane name="second" :lazy="true">
        <span slot="label">
          <svg-icon
            icon-class="cluster-tab-monitor"
            class="tab-pane-label-class"
          ></svg-icon>
          负载监控
        </span>
        <load-monitor
          :charts-data="Object.assign({}, chartsData)"
        ></load-monitor>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  // import splitPane from 'vue-splitpane'; //可拖动长度表格
  import asimSplitPane from '@/components/AsimSplitPane'
  import sectionTitle from '@/components/SectionTitle' //表头
  import { getAction } from '@/api/action'
  import { BaseListMixin } from '@/mixins/BaseListMixin'
  import NodeList from '@/views/cluster-monitor/compoents/NodeList' //节点列表
  import CpuChart from '@/views/cluster-monitor/compoents/CpuChart'
  import Histogram from '@/views/cluster-monitor/compoents/Histogram'
  import LoadMonitor from '@/views/cluster-monitor/compoents/LoadMonitor'
  import HighChartsCpu from '@/views/cluster-monitor/compoents/HighChartsCpu'
  import HightChartsHistogram from '@/views/cluster-monitor/compoents/HightChartsHistogram'
  export default {
    name: 'ClusterStatus',
    components: {
      HightChartsHistogram,
      HighChartsCpu,
      LoadMonitor,
      /*Histogram,
      CpuChart,*/
      NodeList,
      asimSplitPane,
      sectionTitle,
    },
    mixins: [BaseListMixin],
    data() {
      return {
        splitMinPrecent: 12,
        defaultPercent: 25,
        dataSource: [],
        listLoading: false,
        openSide: true,
        filterText: '',
        currentCheckNodeData: {},
        activeName: 'first',
        defaultProps: {
          children: 'children',
          label: 'name',
        },
        workFlowBaseInfo: {
          preId: '编号',
          name: '名称',
          category: '分类',
          createUser: '所有者',
        },
        url: {
          listPage: '/presoftasim/wf/workflow/list',
          list: '/presoftasim/wf/workflow/list',
          detail: 'presoftasim/wf/workflow/detail',
          treeList: '/presoftasim/clusterMonitor/clusterStatus/treeList',
          getCharts: '/presoftasim/clusterMonitor/clusterStatus/getCharts',
        },
        disableMixinCreated: true,
        currentNode: {}, //当前选中节点
        childMethod: {
          cpu: '',
          disk: '',
          network: '',
          histogram: '',
        }, //需要子组件执行的方法名称
        chartsData: {}, //图表数据
      }
    },
    computed: {
      dynamicHeight: function () {
        // 40是box的margin-top和margin-bottom  35是页脚 footer高度
        return window.innerHeight > 710
          ? window.innerHeight - 40 - 35 + 'px'
          : '710px'
      },
    },
    created() {
      this.getList()
      this.getCharts()
    },
    mounted() {},
    updated() {},
    methods: {
      // 模块title展示  最好调整到computed中
      changePaneLWith() {
        this.openSide = !this.openSide
        if (this.openSide) {
          this.splitMinPrecent = 12
          this.defaultPercent = 25
        } else {
          this.splitMinPrecent = (100 / window.innerWidth) * 30
          this.defaultPercent = (100 / window.innerWidth) * 30
        }
        console.log(this.openSide)
      },
      //获取节点列表
      getList() {
        this.listLoading = true
        getAction(this.url.treeList, {})
          .then((response) => {
            if (response.code === 200) {
              //this.dataSource = response.data;
              let arr = []
              //父节点的名称为nodeName 子节点的名称为name 树状图的属性为name
              response.data.map((item) => {
                arr.push(Object.assign({}, item, { name: item.nodeName }))
              })
              this.dataSource = arr
              //更新当前节点数据
              if (this.currentNode.oid != null) {
                // for (let i in this.dataSource){
                //   if (this.currentNode.oid == this.dataSource[i].oid){
                //     this.currentNode = this.dataSource[i];
                //     break;
                //   }
                // }
              } else {
                this.currentNode = this.dataSource[0].children[0]
              }
              this.listLoading = false
            } else {
              this.submitFail(response.message)
            }
          })
          .catch((err) => {
            console.log(err)
          })
      },
      getDetail(oid) {
        getAction(this.url.detail, { oid: oid }).then((res) => {})
      },

      // tab页面切换事件
      handleClick(tab, event) {},
      //nodeList组件中出发点击node事件
      clickNode(data) {
        if (data.children == null) {
          this.currentNode = data
        }
      },
      //跳转到详细图表页面
      goChartDetail(target, title) {
        console.log(this.$route)
        this.$router.push({
          path: '/cluster/chartDetail',
          query: {
            target: target,
            title: title,
            currentNode: this.currentNode,
            chartsData: this.chartsData,
          },
        })
      },
      reload() {
        this.isRouterAlive = false
        this.$nextTick(function () {
          this.isRouterAlive = true
        })
      },
      //获取图表数据
      getCharts() {
        getAction(this.url.getCharts, {})
          .then((response) => {
            if (response.code === 200) {
              this.chartsData = response.data
            } else {
              this.submitFail(response.message)
            }
          })
          .catch((err) => {
            console.log(err)
          })
      },
    },
  }
</script>

<style scoped>
  .splitter-paneL {
    overflow: auto;
  }
  .el-main {
    padding: 0px;
  }
</style>
